 <#import "inc/macro-page.html" as panel>
<#import "macro-filter-card-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "专业化能力预警" "">
</@panel.header>
<@panel.body>
 <!-- Bread crumb -->
 <div class="row page-titles">
     <div class="col-md-5 align-self-center">
         <h3>专业化能力预警</h3> </div>
     <div class="col-md-7 align-self-center">
         <div class="page-nav-bar">
            <button class="btn btn-info btn-click-bind" data-sign="11">部门情况</button>
            <button class="btn btn-info btn-click-bind" data-sign="12">专业情况</button>
            <button class="btn btn-inverse btn-click-bind" data-sign="13" disabled>班组情况</button>
         </div> 
     </div>
 </div>
 <!-- End Bread crumb -->
<!-- Container fluid  -->
<div class="container-fluid">
	<!-- Start Page Content -->                
	<div class="row">
		<div class="col-lg-12">
			<div class="card">

				<div class="custom-card-header quick-bar">
					<div class="hint">&nbsp;</div>
					<@seachpanel.filterbox></@seachpanel.filterbox>
				</div>
                     
				<div class="card-body">
					<!-- Nav tabs -->
					<ul class="nav nav-tabs" role="tablist">
						<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#id-tab-analysis" role="tab"><span class="hidden-xs-down">分析对比</span></a> </li>
						<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#id-tab-profile" role="tab"><span class="hidden-xs-down">具体数据</span></a> </li>
					</ul>
					<!-- Tab panes -->
					<div class="tab-content tabcontent-border">
						<div class="tab-pane active" id="id-tab-analysis" role="tabpanel">
							<div class="row m-t-30">
								<div class="col-lg-6 p-b-30">
									<div id="id-ybnl-chart" style="height: 460px"></div>				                        		
									<table id="id-ybnl-table" class="table table-bordered content-center"  cellspacing="0" width="100%"></table>
								</div>
								<div class="col-lg-6 p-b-30">
									<div id="id-srl-chart" style="height: 460px"></div>				                        		
									<table id="id-srl-table" class="table table-bordered content-center"  cellspacing="0" width="100%"></table>
								</div>
								<div class="col-lg-6 p-b-30">
									<div id="id-zyjn-chart" style="height: 460px"></div>
									<table id="id-zyjn-table" class="table table-bordered content-center"  cellspacing="0" width="100%"></table>
								</div>
								<div class="col-lg-6 p-b-30">
									<div id="id-zhjn-chart" style="height: 460px"></div>
									<table id="id-zhjn-table" class="table table-bordered content-center"  cellspacing="0" width="100%"></table>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="id-tab-profile" role="tabpanel">
							<div class="row m-t-30">
								<div class="col-lg-12">
								    <!-- 用户数据 -->
									<table id="id-user-table" class="table table-bordered table-cell-wrap"  cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th>ERP编号</th>
                                                <th>姓名</th>
                                                <th>单位</th>
                                                <th>部门</th>
                                                <th>班组</th>
                                                <th>岗位</th>
                                                <th>一般能力</th>
                                                <th>胜任力</th>
                                                <th>专业知识和技能</th>
                                                <th>综合专业能力水平</th>
                                            </tr>
                                        </thead>									
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End PAge Content -->
</div>
<!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/datatables.min.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/jquery.dataTables.zh-CN.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/echart/echarts.min.5.4.0.js"></script>
<script type="text/javascript">
const colorList=[
	  '#4caf50','#ef5350'
];
const YBNL= 0, SRL=1, ZYJN=2, ZHJN=3;

$(document).ready(function(){
	
	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/t/prof";
		  if(12===val){
			  ctx = "/t/prof12";
		  } else if(13===val){
			  ctx="/t/prof13"
		  }
		  window.location.href="${ROOT}" + ctx;
	});
	
	const CHARTS=[null, null, null, null];
    const TABLE_IDS = ["#id-ybnl-table","#id-srl-table","#id-zyjn-table","#id-zhjn-table"];
    const TABLES=[null, null, null, null];
    const TITLES = ["一般能力","胜任力","专业知识和技能","综合专业化能力水平"];
    
	CHARTS[YBNL]= echarts.init(document.getElementById("id-ybnl-chart"), null, {renderer: 'canvas',useDirtyRect: false});
    window.addEventListener('resize', CHARTS[YBNL].resize);
    CHARTS[SRL] = echarts.init(document.getElementById("id-srl-chart"), null, {renderer: 'canvas',useDirtyRect: false});
    window.addEventListener('resize', CHARTS[SRL].resize);
    CHARTS[ZYJN] = echarts.init(document.getElementById("id-zyjn-chart"), null, {renderer: 'canvas',useDirtyRect: false});
    window.addEventListener('resize', CHARTS[ZYJN].resize);
    CHARTS[ZHJN] = echarts.init(document.getElementById("id-zhjn-chart"), null, {renderer: 'canvas',useDirtyRect: false});
    window.addEventListener('resize', CHARTS[ZHJN].resize);

	var $userTable=$('#id-user-table').dataTable({
	    "ordering":false,//是否允许排序
	    "searching": false,
	    "bFilter":false,//是否需要过滤
	    "info": false,
	    "paging": false,
	    'bAutoWidth':false,//是否自适应宽度
	    "bDestroy" : true,//是否允许删除时销毁
	    /* 定义列 */
	    "aoColumns": [
   	        //设置列
   	        {'mData': 'no','sWidth':'80px', defaultContent: '', 'sClass': 'cell-no-wrap' },
   	        {'mData': 'name','sWidth':'80px', defaultContent: '', 'sClass': 'cell-no-wrap' },
   	        {'mData': 'unit','sWidth':'160px', defaultContent: '' },
   	        {'mData': 'depart','sWidth':'160px', defaultContent: '' },
   	        {'mData': 'classOrGroup','sWidth':'100px', defaultContent: '' },
   	        {'mData': 'job','sWidth':'90px', defaultContent: '', 'sClass': 'cell-no-wrap' },
   	        {'mData': 'ybnl','sWidth':'90px', defaultContent: '' },
   	        {'mData': 'tysrl','sWidth':'90px', defaultContent:''},
   	        {'mData': 'zyzsjn','sWidth':'90px', defaultContent: '' },
   	        {'mData': 'zhzyhnl','sWidth':'90px', defaultContent: '' }
   	    ]
	});
	
	
    // 将从后台的数据转换为中间数据
	var calcTeamToView= function(svrData){

		var ret = {
			 columns: [],
			 ybnl:[],
			 srl:[],
			 zyjn:[],
			 zhjn:[],
			 
			 userData: [],
	
			 ybnlStand:[],
			 srlStand:[],
			 zyjnStand:[],
			 zhjnStand:[]
		}
		//转换用户数据
		if(svrData.users&& svrData.users.length>0){
			ret.userData= svrData.users;
		}
		//转换机构数据
		if(svrData.teams&&svrData.teams.length>0){
			svrData.teams.forEach(item => {
				ret.columns.push(item.name);
				
				ret.ybnl.push($.formatFloat(item.ybnl));
				ret.srl.push($.formatFloat(item.tysrl));
				ret.zyjn.push($.formatFloat(item.zyzsjn));
				ret.zhjn.push($.formatFloat(item.zhzyhnl));
	
				ret.ybnlStand.push(svrData.standard.ybnl);
				ret.srlStand.push(svrData.standard.tysrl);
				ret.zyjnStand.push(svrData.standard.zyzsjn);
				ret.zhjnStand.push(svrData.standard.zhzyhnl);
			});
		}
		
		return ret;
	}
    

	//分析图
	var initChartData = function(type, mydata){
		
		var values=[];
		var title=TITLES[type];
		switch(type){
		case YBNL:
			values= mydata.ybnl;
			break;
		case SRL:
			values= mydata.srl;
			break;
		case ZYJN:
			values= mydata.zyjn;
			break;
		case ZHJN:
			values = mydata.zhjn;
			break;
		}
	    
	    var option = {
	      color: ['#00c4c0'],
		  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  title: {
			  text: title,
			  left: 'center'
		  },
		  xAxis: [
		    {
		      type: 'category',
		      data: mydata.columns
		    }
		  ],
		  yAxis: [
		    {
		      type: 'value'
		    }
		  ],
		  series: [
		    {
		      type: 'bar',
		      data: values
		    }
		  ]
		};

	    if (option && typeof option === 'object' && CHARTS[type]) {
	    	CHARTS[type].setOption(option);
	    }

	}

	var initTeamTable = function(type, mydata) {
		var columns = [];
		var dataMind ={};
		var dataStandard ={};
		
		var index = 0;
		columns.push({
			'title': '&nbsp;',
			'mData': 'col0',
			'sWidth':"100px",
			'defaultContent': ''
		});
		dataMind['col0']=TITLES[type];
		dataStandard['col0']='预警标准';
		mydata.columns.forEach(name=>{
			var colName= "col"+ (++index);
			columns.push({
				'title': name,
				'mData': colName,
				'sWidth':"100px",
				'defaultContent': ''
			});
			
			switch(type){
			case YBNL:
				dataMind[colName]=mydata.ybnl[index-1];
				dataStandard[colName]=mydata.ybnlStand[index-1];
				break;
			case SRL:
				dataMind[colName]=mydata.srl;
				dataStandard[colName]=mydata.srlStand[index-1];
				break;
			case ZYJN:
				dataMind[colName]=mydata.zyjn;
				dataStandard[colName]=mydata.zyjnStand[index-1];
				break;
			case ZHJN:
				dataMind[colName]=mydata.zhjn;
				dataStandard[colName]=mydata.zhjnStand[index-1];
				break;
			}

		});
				
		var mytable = TABLES[type];
		if(mytable) {
			mytable.fnClearTable();
			mytable.fnDestroy();
		}
		
		mytable = $(TABLE_IDS[type]).dataTable({
		    "ordering":false,
		    "searching": false,
		    "bFilter":false,
		    "info": false,
		    "paging": false,
		    'bAutoWidth':false,
		    "bDestroy" : true,
		    "aoColumns": columns,
		    "data":[dataMind,dataStandard]
		});
		mytable.fnDraw();
		TABLES[type] = mytable;
	}

    var viewToPage = function(response){
    	if(response&& response.code === 'ok'){
    		if(response.data) {
	    		//更改用户信息
	    		$userTable.fnClearTable();
	    		if(response.data.users && response.data.users.length>0){
	    			$userTable.fnAddData(response.data.users);
	    		}
	    		$userTable.fnDraw();  
	    		//更改能力表信息
	    		var viewData = calcTeamToView(response.data);
	    		initTeamTable(YBNL, viewData);
	    		initTeamTable(SRL, viewData);
	    		initTeamTable(ZYJN, viewData);
	    		initTeamTable(ZHJN, viewData);
	
	    		initChartData(YBNL, viewData);
	    		initChartData(SRL, viewData);
	    		initChartData(ZYJN, viewData);
	    		initChartData(ZHJN, viewData);
    		}else {
    			toastr.error("未查到预警资料");
    		}
    	} else {
    		toastr.error(response?response.desc:"获取专业能力预警资料失败");
    	}
    }

    //初始化过滤面板
    $.post('${ROOT}/t/treeNav',function(data, status){
    	if(data.code==="ok"){
			$.fn.filterBox({
				data: data.data,
				onsubmit: function(form, data){
				    $.post('${ROOT}/t/sumprof13',data,function(data, status){
				    	viewToPage(data);
				    }, 'json');
				}
			})
    	}
    })

    //先提取数据
    $.post('${ROOT}/t/sumprof13',function(data, status){
    	viewToPage(data);
    }, 'json');
	
});
</script>
</@panel.footer>
</#escape>